<template>
  <div style="margin-top: 90px">
    <h3>大触周边</h3>
    <p :style="pStyle">count: {{ count }}, name: {{ name }}</p>
    <button @click="getDatas">获取vuex</button>
  </div>
</template>

<script>
// mapState: 辅助函数，可以将vuex中的数据，快速在当前组件生成对应的计算属性，让组件使用state数据更加方便。
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Vue2demoDCThree",
  data() {
    return {
      show: true,
    };
  },
  computed: {
    ...mapState(["count", "name"]), // 将state中的count和name数据，映射在计算属性中，其实就变成了当前组件的计算属性了。
    ...mapGetters(["infoTip"]), // 将getters中的某些衍生数据，映射到当前组件的计算属性。
    pStyle() {
      return {
        backgroundColor: this.show ? "yellow" : "red",
      };
    },
  },
  methods: {
    ...mapMutations(["setName"]), // 将vuex中的mutations中的方法，映射到当前methods中，方便调用.
    ...mapActions(["getUsersList"]),
    getDatas() {
      console.log(this.count, this.name);
      console.log(this.infoTip);
      this.setName(Date.now()); // 等价于 this.$store.commit('setName', "参数")
      // this.getUsersList() // 等价于 this.$store.dispatch('getUsersList', "参数")
    },
  },
};
</script>

<style lang="scss" scoped></style>
